<template>
  <div>
    <div v-if="showMe">
      <Backbar title="订单"></Backbar>
      <div style="height: 1rem"></div>
      <div class="order_box" v-show="showOrder">
        <div class="order_one">
          <!--<div class="order_img">-->
            <!--<img src="../images/shop-logo.png" alt="">-->
          <!--</div>-->
          <div v-if="foodsOrder!==['']" class="order_info">
            <header class="order_info_t">
              <div class="order_title flex_align">
                <p class="b_name">{{this.storeName}}</p>
                <p class="b_status">正在使用</p>
              </div>
              <p class="order_time">下单时间：{{this.startTime}}</p>
            </header>
            <footer class="order_info_b flex_align">
              <p class="order_brief_info">菜品</p>
              <p class="order_price">数量</p>
              <p class="order_time">约等待</p>
            </footer>
            <footer v-for=" (foods, index) in foodsOrder " :key="index" class="order_info_b flex_align">
              <p class="order_brief_info">{{foods.food_name}}</p>
              <p class="order_price">{{foods.number}}</p>
              <p class="order_time">{{foods.timeLeft}}</p>
            </footer>
            <!--<div style="display:none;">{{  }}</div>-->
          </div>
        </div>
      </div>

      <Fixednav></Fixednav>
    </div>
  </div>

</template>

<script>
import Backbar from './small_components/Back_bar';
import Fixednav from './small_components/Fixed_nav';
import { mapGetters } from 'vuex';
export default {
  name: 'order',
  data () {
    return {
      showOrder: false,
      timeLeft: '', // 剩余时间
      startTime: '', // 下单时间
      storeName: '', // 店名
      orderStatus: '正在使用', // 订单状态
      foodsOrder: [], // 订单列表
      showMe: true
    };
  },
  computed: {
    ...mapGetters([
      'getLogin',
      'getFalseOrder' // 已完成订单
    ])
  },
  mounted () {
  },
  methods: {
    getListIng (list, i, len) {
      // 计算剩余时间
      if (this.$route.path === '/order') {
        let _this = this;
        this.timeOut = setTimeout(() => {
          // _this.getOrder();
          if (list.order_taking_time !== false) {
            let countTime = Math.round((new Date(list.order_taking_time).getTime() + list.cooking_time * 60000 - new Date().getTime()) / 60000);
            console.log((new Date(list.order_taking_time).getTime() + list.cooking_time * 60000 - new Date().getTime()) / 60000);
            list.timeLeft = countTime + '分钟';
            if (countTime <= 0) {
              list.timeLeft = '已完成';
              if (i === len) {
                clearTimeout(this.timeOut);
              }
            } else {
              _this.getListIng(this.foodsOrder[i], i, len);
            }
          } else {
            list.timeLeft = '待接单';
          }
        }, 1000);
      } else {
        clearTimeout(this.timeOut);
      }
    },
    getOrder () {
      // 获取订单
      if (this.global.tableNumber !== '' && this.global.storeId !== '') {
        this.showOrder = true;
        this.$http
          .post(
            this.global.url + 'pos/get_order_details_time?belonged_to_id=' + this.global.storeId + '&table_number_id=' + this.global.tableNumber,
            {},
          {
            emulateJSON: true,
            header: {
              'Access-Control-Allow-Origin': '*',
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }
          )
          .then(
            response => {
              response = response.data;
              this.foodsOrder = response.food_time;
              this.storeName = this.foodsOrder[0].config_id;
              this.startTime = this.foodsOrder[0].time_of_completing_to_order;
              for (let i = 0; this.foodsOrder.length > i; i++) {
                this.$set(this.foodsOrder[i], 'timeLeft', '');
                this.getListIng(this.foodsOrder[i], i, this.foodsOrder.length);
              }
              console.log(this.foodsOrder);
            },
            response => {
              // error callback
              console.log(response.data);
            }
          );
      } else {
        // window.close();
        // this.$router.push({ path: 'demo' });
      }
    }
  },
  created () {
    this.$store.dispatch('setLoading', false);
    this.global.whichPage = 'order';
    this.getOrder();
  },
  components: {
    Backbar,
    Fixednav
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.order_box{
  margin: 1rem 0 1.2rem;
}
.order_one{
  margin-bottom: .2rem;
  .order_img{
    width:1rem;
    height:1rem;
    float:left;
    padding: .2rem .4rem;
    img{
      width:100%;
    }
  }
  .order_info{
    background:#fff;
    margin-top: .5rem;
    padding:.2rem .2rem 0 0;
    box-sizing:border-box;
    .order_info_t{
      border-bottom: 1px solid #eee;
      .order_title{
        height:.6rem;
        line-height:.6rem;
        .b_name{
          padding-left: 2rem;
          font-size:.6rem;
        }
        .b_status{
          font-size:.35rem;
          color:#333;
        }
      }
      .order_time{
        font-size:.3rem;
        color:#999;
        line-height:.6rem;
      }
    }
    .order_info_b{
      padding: 0.2rem 0;
      .order_brief_info{
        width: 40%;
        font-weight: bold;
        font-size: 0.346667rem;
        color: #666;
      }
      .order_price{
        width: 30%;
        text-align: center;
        font-size: 0.346667rem;
        color: #333;
        font-weight: bold;
      }
      .order_time{
        width: 30%;
        font-size: 0.346667rem;
        color: #333;
        font-weight: bold;
      }
    }
  }
}
</style>
